<template>
    <div id="movie-tab">
    <ul>
        <router-link tag="li" to="/movie/city" >
           北京<i class="fa fa-caret-down"></i>
        </router-link>
                <router-link class="font-color" tag="li" to="/movie/now" >
          正在热映
        </router-link>
                <router-link class="font-color" tag="li" to="/movie/coming" >
           即将上映
        </router-link>
        <router-link tag="li" to="/movie/search" >
           <i class="fa fa-search"></i>
        </router-link>
    </ul>
    <keep-alive>
 <router-view></router-view>
    </keep-alive>
   
</div>
</template>
<script>
export default {
    setup() {
        
    },
}
</script>
<style scoped>
#movie-tab{
    padding-top: 50px;
 
}
ul{
    border-bottom:1px solid #ccc ;

}
li{
    display: inline-block;
    width: 25%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
}
.font-color{
    color: #666;
}

.fa-caret-down{
    margin-left: 5px;
}
.fa-search{
    font-size: 25px;
    color: #E54847;
}
.router-link-active{
    color:#E54847;
    border-bottom: 2px solid #E54847 ;
}

</style>